import {useContext, useReducer} from "react";
import {Colors} from "./Colors";
import {UPDATA_COLOR} from './Colors'

function Buttons () {
    let {dispatch} = useContext(Colors)
    return (
        <div>
            {/*color相当于  Colors组件里的action.color*/}
            {/*点击的时候type如果是这个常量那么action.color就改变颜色 */}
            <button
                onClick={
                    () => dispatch({
                        type:UPDATA_COLOR,
                        color:'red'
                    })
                }
            >黄色</button>
            <button
                onClick={
                    () => dispatch({
                        type:UPDATA_COLOR,
                        color:'yellow'
                    })
                }
            >红色</button>
        </div>
    )
}
export {
    Buttons
}